<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | General Form Elements</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Font Awesome -->

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}" >
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}" >
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}" >
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/_all-skins.min.css}" >
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}" >
    <style>
        .login-body{
            width: 300px;
            height: 340px;
            margin: 0 auto;
        }
        .login-page{
            background:dodgerblue;
        }
        .bk{
            padding-top: 200px;
            background:blueviolet;
        }
        .login-logo{
            margin-bottom: 0px;
        }
        .login-box-msg{
            color: #CCCCCC;
        }
    </style>
</head>
<body class="hold-transition login-page">
<div class="bk">
    <div class="box box-info  login-body">
        <div class="login-logo box-header with-border">
            <h3 class="box-title">用户登录</h3>
        </div>
        <div class="login-box-body">
            <p class="login-box-msg" id="msg">请填写用户信息</p>
            <form class="form-horizontal">
                <div class="box-body">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="username" id="username">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" placeholder="password" id="password">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                    <button type="button" id="loginbtn" class="btn btn-block btn-info pull-right">登 录</button>
                </div>
                <!-- /.box-footer -->
            </form>
        </div>
        <!-- /.box-header -->
        <!-- form start -->

    </div>
</div>
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<script>
    $("#loginbtn").click(function () {
        var name = $("#username").val();
        var password = $("#password").val();
        var info = {'username':name,"password":password};
        if(name.length==0 || password.length == 0){
            $("#msg").html("用户名和密码不能为空");
            $("#msg").css({ color: "#ff0011"});
        }else {
            $.ajax({
                type: 'GET',
                contentType: "application/json",
                url: "/user/login",
                data:  info,
                dataType: 'json',

                success: function(e){
                    var s = e.msg;
                    if (e.status == 500){
                        $("#msg").html(s);
                        $("#msg").css({ color: "#ff0011"});
                    }
                    if (e.status == 400){
                        $("#msg").html(s);
                        $("#msg").css({ color: "#ff0011"});
                    }
                    else {
                        window.location.href="/user/list";
                    }
                }
            });
        }
    });
    $("#password").focus(function () {
        $("#msg").html("请填写用户信息");
        $("#msg").css({ color: "#ccc"});
    });
    $("#username").focus(function () {
        $("#msg").html("请填写用户信息");
        $("#msg").css({ color: "#ccc"});
    });
</script>
</body>
</html>